<template>
  <div class="channel share-channel">
    <!-- 发布表单 -->
    <el-card class="create-post">
      <el-form :model="postForm">
        <el-form-item label="分享内容">
          <el-input type="textarea" :rows="3" v-model="postForm.content"/>
        </el-form-item>
        <el-form-item label="上传照片">
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :limit="9"
              multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-button type="primary" @click="submitPost">发布</el-button>
      </el-form>
    </el-card>

    <!-- 帖子列表 -->
    <div class="post-list">
      <el-card v-for="post in posts" :key="post.id" class="post-item">
        <div class="post-images">
          <el-image
              v-for="(img, idx) in post.images"
              :key="idx"
              :src="img"
              :preview-src-list="post.images"/>
        </div>
        <div class="post-content">{{ post.content }}</div>
        <div class="post-meta">
          <span class="author">{{ post.author }}</span>
          <span class="time">{{ post.time }}</span>
        </div>
        <comment-section :comments="post.comments" @submit="handleComment"/>
      </el-card>
    </div>
  </div>
</template>